<template>
  <!-- /postquestion/:userid  发布 -->
  <div class="postquestions">
    <header>
      <van-icon name="cross" size="20px" @click="onBack">存草稿</van-icon>

      <div class="postquestions-title">
        <div class="title-img">
          <img src="../../public/img/community-1.png" alt="" />
        </div>
        <div class="title-name" v-if="flag" @click="setFlag">狗星人</div>
        <div class="title-name" v-else @click="setFlag">喵星人</div>
      </div>
      <p class="postquestions-add" @click="pushminelist">发布</p>
    </header>
    <div class="postquestions-content">
      <van-cell-group inset>
        <van-cell-group inset>
          <van-field
            v-model="minelist.qtitle"
            rows="24"
            type="textarea"
            maxlength="40"
            placeholder="请输入您的问题"
            show-word-limit
            class="replenish"
          />
          <van-field
            class="replenish2"
            v-model="minelist.qcontext"
            :rows="size22"
            type="textarea"
            maxlength="2000"
            placeholder="请补充详细内容"
            show-word-limit
            @focus="setflag2"
            @blur="setflag2"
          />
        </van-cell-group>
      </van-cell-group>
    </div>
    <div v-if="flag2" class="replenish-footer">
      <div class="replenish-icon">
        <van-icon name="photo" />
        <van-icon name="bell" />
        <van-icon name="location" />
      </div>
      <div class="replenish-icon"><van-icon name="arrow-down" /></div>
    </div>
  </div>
</template>

<script>
import { postUpdataApi } from "../utils/api";
import { ref, reactive } from "vue";
// import { mapActions, mapState } from "vuex";
export default {
  setup() {
    //切换喵星人/狗星人
    const flag = ref(true);
    const setFlag = () => {
      flag.value = !flag.value;
    };
    const size22 = ref(22);
    //切换底部
    const flag2 = ref(false);
    const setflag2 = () => {
      flag2.value = !flag2.value;
      if (flag2.value) {
        size22.value = 20;
      } else {
        size22.value = 22;
      }
    };

    //获得发布时间
    const time = new Date();
    const daay = ref(time.getMonth() + 1 + "-" + time.getDate());
    //todo 数据收集 存放输入的数据
    const minelist = reactive({
      qtitle: "",
      qcontext: "",
      queTime: daay,
      queAnswers: [],
      typeId: "1",
      type: "推荐",
      qid: "11",
      uid: "0002",
    });

    // 发布获得数据;
    // const pushminelist = (minelist) => {
    //   // if (!minelist) {
    //   //   console.log("内容不能为空");
    //   // } else {
    //   //   localStorage.setItem("qarr", JSON.stringify(minelist));

    //   // }
    //   const that = this;
    //   that.$router.push({
    //     path: "/questiondetail/" + minelist.userId + "&" + minelist.qid,
    //   });
    // };

    return {
      minelist,
      flag,
      setFlag,
      // pushminelist,
      flag2,
      setflag2,
      size22,
      daay,
      time,
    };
  },
  //todo2 执行
  // create() {
  //   this.postminelist();
  // },
  methods: {
    //todo3 获得
    // ...mapActions(["postminelist"]),
    onBack() {
      this.$router.go(-1);
    },
    async pushminelist() {
      await postUpdataApi({
        uid: "0002",
        qobj: this.minelist,
      });
      localStorage.setItem("qarr2", JSON.stringify(this.minelist));
      this.$router.push("/index/community");
    },
  },
  // computed: {
  //   ...mapState({ minelist: (state) => state.message.minelist }),
  // },
};
</script>

<style lang="less">
.postquestions {
  padding: 10px 20px;
  background: #fff;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0px;
  font-size: 20px;
  .postquestions-title {
    display: flex;
    justify-content: start;
    .title-img {
      width: 30px;
      height: 30px;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .postquestions-add {
    color: #4e92ff;
  }
}
.postquestions-content {
  font-size: 20px;
}
.replenish {
  position: absolute;
  top: 50px;
  left: 0;
  bottom: 100px;
  right: 0;
  border-top: 2px solid #d6d6d6;
}
.replenish2 {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  border-top: 1px solid #d6d6d6;
  z-index: 11;
}
.replenish-footer {
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  background: #f7f7f7;
  padding: 15px 20px;
  font-size: 35px;
  z-index: 100;
  .replenish-icon {
    display: flex;
    justify-content: space-around;
    .van-icon {
      margin: 0 10px;
    }
  }
}
</style>
